<template>
    <div class="modelArea">
        <div class="top-nav" :style="{ background: `url('${navBj}')` }">
            <div class="search">
                <div class="left-box">
                    <div class="input">
                        <el-input
                            @keyup.enter.native="
                                page = 1;
                                getSearchList();
                            "
                            v-model="keyword"
                            placeholder="请输入关键字"
                        ></el-input>
                    </div>
                </div>
                <div
                    class="right-box"
                    @click="
                        page = 1;
                        getSearchList();
                    "
                >
                    搜索
                    <i class="el-icon-search"></i>
                </div>
            </div>
        </div>

        <div class="middle-nav mt30">
            <div v-if="!isSearch" class="select-type">
                <div class="st-t">
                    <div class="label">模板分类：</div>
                    <div
                        v-for="(item, index) in firstKinds"
                        :key="index"
                        class="st-item"
                        :class="{ 'st-item-s': item.id == firstKindId }"
                    >
                        <nuxt-link
                            :to="`/templates/modelarea/${item.id}/${item.second[0].id}/1`"
                        >
                            {{ item.name }}
                            <!-- <span>{{ "(" + item.datacount + ")" }}</span> -->
                        </nuxt-link>
                    </div>
                </div>
                <div class="st-t">
                    <div class="label">选择分类：</div>
                    <nuxt-link
                        v-for="(item, index) in secondKinds"
                        :key="index"
                        class="st-item"
                        :class="{ 'st-item-s': item.id == secondKindId }"
                        :to="`/templates/modelarea/${firstKindId}/${item.id}/1`"
                    >
                        {{ item.name }}
                    </nuxt-link>
                </div>
            </div>
            <div class="fz16 c666" v-if="isSearch">共{{ count }}条</div>
        </div>

        <div class="intro">
            <el-image
                :src="'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/mbzq-abstract-bj.png'"
                fit="cover"
                class="intro-img"
            ></el-image>
            <div class="txt">
                {{ introduce["modelarea" + firstKindId] }}
            </div>
        </div>

        <div v-if="modelList.length > 0" class="data-list">
            <nuxt-link
                v-for="(item, index) in modelList"
                :key="index"
                :to="'/templates/' + item.id + '.html'"
                target="_blank"
            >
                <model-item class="modelItem" :item="item"></model-item>
            </nuxt-link>
        </div>

        <div v-else><el-empty description="敬请期待"></el-empty></div>

        <!-- 分页 -->
        <div class="page" v-if="!isSearch">
            <el-pagination
                background
                layout="prev, pager, next"
                :current-page="page"
                :page-size="pagesize"
                :total="count"
                @current-change="changePage1"
            >
            </el-pagination>
        </div>

        <div class="page" v-if="isSearch">
            <el-pagination
                background
                layout="prev, pager, next"
                :current-page="page"
                :page-size="pagesize"
                :total="count"
                @current-change="changePage2"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { goTopSmooth } from "@/assets/utils/utils.js";

import { mapState, mapMutations } from "vuex";

import modelItem from "@/components/modelArea/modelItem";

import {
    getModelCate,
    getModelList,
    getSearchList,
} from "@/assets/api/modelAreaApi";
import { getanalysedata } from "@/assets/api/indexApi.js";

import navBj from "@/assets/images/modelArea/navBj.png";

import introduce from "@/assets/json/introduce.json";
export default {
    name: "modelarea",
    async asyncData({ params }) {
        let data = {
            firstKinds: [], //一级分类
            firstKindId: -1, //一级分类id (-1表示没选)
            secondKinds: [], //二级分类
            secondKindId: -1, //二级分类id (-1表示没选)
            page: 1,
            pagesize: 16,
            count: 0,
            modelList: [], //模板列表数据(主数据)
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/modelarea/",
                images: [""],
                title: "",
                description: "",
                pubDate: "",
                upDate: "",
            },
        };
        data.firstKindId = params.tid;
        data.secondKindId = params.s_tid;
        data.jsonld["@id"] += data.firstKindId + "/" + data.secondKindId;
        if (params.page) {
            data.page = parseInt(params.page);
            data.jsonld["@id"] += "/" + params.page;
        }
        let res = await getModelCate();
        if (res.code == 1) {
            data.firstKinds = res.data.slice(0,6);
            for (let item of data.firstKinds) {
                if (item.id == data.firstKindId) {
                    data.secondKinds = item.second;
                }
            }

            var params = {
                tid: data.firstKindId,
                s_tid: data.secondKindId,
                page: data.page,
                pagesize: data.pagesize,
            };
            let res1 = await getModelList(params);
            if (res1.code == 1) {
                data.modelList = res1.data.list;
                if (res1.data.list.length > 0) {
                    data.count = res1.data.list[0].datacount;
                    data.jsonld.pubDate = data.jsonld.upDate =
                        res1.data.list[0].createtime;
                } else {
                    data.count = 0;
                }
            } else {
                data.modelList = [];
            }
        }

        return data;
    },
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.metaTitle + "--【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.metaDescription,
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.metaKeywords,
                },
            ],
        };
    },
    layout: "home",
    components: { modelItem },
    props: {},
    data() {
        return {
            metaTitle: "财税表单-财税表格",
            metaKeywords: "财税表单,财税表格",
            metaDescription:
                "小竹财税财税表单版块，汇集众多财税表单、财税表格案例，实时更新财税表单格式及财税表格样式，方便企业财税和财税从业人员下载使用。",

            navBj: navBj,
            // pagesize: 16,
            // page: 1,
            // count: 0,
            tid: 10,

            keyword: "",
            menuSearchIndex: 0,

            // firstKinds: [], //一级分类
            // firstKindId: -1, //一级分类id (-1表示没选)
            // secondKinds: [], //二级分类
            // secondKindId: -1, //二级分类id (-1表示没选)

            // modelList: [], //模板列表数据(主数据)
            isSearch: false,

            introduce: introduce,
        };
    },

    created() {
        // this.modelList = this.modelList;
        // if (this.modelList.length > 0) {
        //     this.count = this.modelList[0].datacount;
        // } else {
        //     this.count = 0;
        // }
        // this.firstKindId = this.$route.params.tid.replace(".html", "");
        // this.secondKindId = this.$route.params.s_tid.replace(".html", "");
        this.getMetaInfo();
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    // watch: {
    //     $route: function (to, from) {
    //         try {
    //             if (window) {
    //                 this.init();
    //             }
    //         } catch (error) {}
    //     },
    // },
    mounted() {
        console.log(this.firstKinds);
        this.$nextTick(() => {
            goTopSmooth();
        });
        // this.getModelCate();
        // this.setmenuIndex("6");
        this.init();
    },
    methods: {
        ...mapMutations("common", ["setmenuIndex"]),

        init() {
            // this.getModelCate();

            // seo 后这个方法放这执行
            this.behavioralRecords();
        },

        getMetaInfo() {
            if (this.$route.params.tid == "1") {
                this.metaTitle = "财税表单-财税表格";
                this.metaKeywords = "财税表单,财税表格";
                this.metaDescription =
                    "小竹财税财税表单版块，汇集众多财税表单、财税表格案例，实时更新财税表单格式及财税表格样式，方便企业财税和财税从业人员下载使用。";
            } else if (this.$route.params.tid == "2") {
                this.metaTitle = "企业规章制度";
                this.metaKeywords = "企业规章制度";
                this.metaDescription =
                    "小竹财税企业规章制度版块，汇集众多企业规章制度案例，实时更新各行业企业规章制度及企业内部规章制度档案，方便企业经营管理和企业管理人员下载使用。";
            } else if (this.$route.params.tid == "3") {
                this.metaTitle = "企业合同范本-行业合同模板";
                this.metaKeywords = "企业合同范本,行业合同模板";
                this.metaDescription =
                    "小竹财税企业合同范本版块，汇集众多企业合同范本案例，实时更新企业合同范本及行业合同模板，方便企业经营管理和企业管理人员下载使用。";
            } else if (this.$route.params.tid == "3") {
                this.metaTitle = "企业合同范本-行业合同模板";
                this.metaKeywords = "企业合同范本,行业合同模板";
                this.metaDescription =
                    "小竹财税企业合同范本版块，汇集众多企业合同范本案例，实时更新企业合同范本及行业合同模板，方便企业经营管理和企业管理人员下载使用。";
            } else if (this.$route.params.tid == "12") {
                this.metaTitle = "办公常用表格下载-人事行政常用表单";
                this.metaKeywords = "办公常用表格下载,人事行政常用表单";
                this.metaDescription =
                    "小竹财税办公常用表格下载版块，汇集众多办公常用表格下载、人事行政常用表单案例，实时更新各行业办公常用表格及行业人事行政常用表单，方便企业经营管理和企业相关人员下载使用。";
            } else if (this.$route.params.tid == "11") {
                this.metaTitle = "毕业季常用表格下载";
                this.metaKeywords = "毕业季常用表格下载";
                this.metaDescription =
                    "小竹财税毕业季常用表格下载版块，汇集众多毕业季常用表格下载案例，实时更新毕业开题报告、答辩PPT以及简历模板，方便毕业生和相关教务人员下载使用。";
            } else if (this.$route.params.tid == "8") {
                this.metaTitle = "财税模板干货分享";
                this.metaKeywords = "财税模板干货分享";
                this.metaDescription =
                    "小竹财税财税模板干货分享下载版块，汇集众多毕财税模板干货分享案例，实时更新留抵退税政策梳理，小规模纳税人优惠、差额征税、高新技术企业申报等，方便企业财税和相关财税从业人员下载使用。";
            }

            for (let items of this.firstKinds) {
                if (this.$route.params.tid == items.id) {
                    for (let item of items.second) {
                        if (this.$route.params.s_tid == item.id) {
                            this.metaTitle = `模板专区-${items.name}-${item.name}`;
                            this.metaKeywords += `,${items.name},${item.name}`;
                            this.jsonld.title = this.metaTitle;
                            this.jsonld.description = this.metaDescription;
                            return;
                        }
                    }
                }
            }
        },

        //获取一级菜单
        async getModelCate() {
            let res = await getModelCate();
            if (res.code == 1) {
                this.firstKinds = res.data;
                if (
                    this.$route.params.tid &&
                    this.$route.params.s_tid.replace(".html", "")
                ) {
                    this.firstKindId = this.$route.params.tid;
                    for (let item of this.firstKinds) {
                        if (item.id == this.firstKindId) {
                            this.secondKinds = item.second;
                        }
                    }
                    this.secondKindId = this.$route.params.s_tid.replace(
                        "",
                        ""
                    );
                    this.page = 1;
                    this.getModelList();
                } else {
                    this.selectFirstKind(this.firstKinds[0]);
                }
            }
        },

        //一级菜单选择
        selectFirstKind(item) {
            if (item.id == this.firstKindId) {
                return; //点击相同的一级菜单,不做后续处理
            }
            this.firstKindId = item.id;
            this.secondKinds = item.second;
            if (item.second != null && item.second.length > 0) {
                this.secondKindId = item.second[0].id;
                this.page = 1;
                this.getModelList();
            }
        },

        //二级菜单选择
        selectSecondKind(item) {
            if (this.secondKindId == item.id) {
                return; //点击相同的二级菜单,不做后续处理
            }
            this.secondKindId = item.id;
            this.page = 1;
            this.getModelList();
        },

        //获取模板列表
        async getModelList(is = false) {
            var params = {
                tid: this.firstKindId,
                s_tid: this.secondKindId,
                page: this.page,
                pagesize: this.pagesize,
            };
            let res = await getModelList(params);
            if (res.code == 1) {
                this.modelList = res.data.list;
                if (res.data.list.length > 0) {
                    this.count = res.data.list[0].datacount;
                } else {
                    this.count = 0;
                }
                this.behavioralRecords();
            } else {
                this.modelList = [];
            }
        },

        behavioralRecords() {
            let describe = "";
            let code = "PG1";
            for (let items of this.firstKinds) {
                if (items.id == this.firstKindId) {
                    describe = items.name;
                    switch (this.firstKindId + "") {
                        case "10":
                            code = "PG4";
                            break;
                        case "1":
                            code = "PG3";
                            break;
                        case "2":
                            code = "PG5";
                            break;
                        case "3":
                            code = "PG6";
                            break;
                        case "12":
                            code = "PG7";
                            break;
                        case "11":
                            code = "PG8";
                            break;
                        case "8":
                            code = "PG9";
                            break;
                    }

                    for (let item of items.second) {
                        if (item.id == this.secondKindId) {
                            describe = items.name + "-" + item.name;
                        }
                    }
                }
            }
            getanalysedata({
                m_id: 5,
                type: 1,
                code: code,
                describe: describe,
            });
        },

        //搜索
        async getSearchList() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => {});
                return;
            }
            if (!this.keyword) {
                this.isSearch = false;
                this.getModelList();
                return;
            }
            this.isSearch = true;
            var params = {
                type: "drygoods",
                keyword: this.keyword,
                page: this.page,
                pagesize: this.pagesize,
            };
            let res = await getSearchList(params);
            if (res.code == 1) {
                this.modelList = res.data;

                if (res.data.length > 0) {
                    this.count = res.data[0].all_count;
                } else {
                    this.count = 0;
                }

                getanalysedata({
                    m_id: 5,
                    type: 1,
                    code: "PG2",
                    describe: "模板专区-搜索-" + this.keyword, // + "-" + this.page
                });
            }
        },

        //进详情
        goDetail(item) {
            // this.$router.push({
            //   path: "modelarea/ModelDetail",
            //   query: { id: item.id },
            // });
            // let { href } = this.$router.resolve({
            //     path: "/modelarea/ModelDetail",
            //     query: { id: item.id },
            // });
            // window.open(href, "_blank");
        },

        //搜索
        // goSearch(type) {
        //     this.$router.push({
        //         path: '/search',
        //         query: { type: type, keyword: this.keyword },
        //     })
        // },

        //分页
        changePage1(e) {
            console.log(e);
            this.$router.push({
                path: `/templates/modelarea/${this.firstKindId}/${this.secondKindId}/${e}`,
            });
            return;
            this.page = e;
            this.getModelList();
            this.toTop();
        },

        changePage2(e) {
            this.page = e;
            this.getSearchList();
            this.toTop();
        },

        toTop() {
            goTopSmooth();
        },
    },
};
</script>
<style lang="scss" scoped>
@import url("@/assets/static/reset.css");

.modelArea {
    background: #fff;

    .top-nav {
        display: flex;
        align-items: center;
        width: 100%;
        height: 148px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover !important;

        .search {
            margin: 0 auto;
            display: flex;
            background-color: transparent;
            width: 600px;
            height: 60px;
            border-radius: 31px;

            .left-box {
                margin: 0 auto;
                display: flex;
                align-items: center;
                background-color: #fff;
                width: 477px;
                height: 60px;
                border-radius: 31px 0 0 31px;
                padding: 0 8px;

                .left {
                    cursor: pointer;

                    .left-text {
                        //   width: 80px;
                        text-align: center;
                        color: #999999;

                        i {
                            color: #999999;
                            margin-left: 3px;
                        }
                    }
                }

                .line {
                    height: 17px;
                    width: 1px;
                    background-color: #c2c2c2;
                }

                .input {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 316px;

                    i {
                        color: #666666;
                        font-size: 17px;
                    }
                }
            }

            .right-box {
                cursor: pointer;
                text-align: center;
                line-height: 60px;
                width: 123px;
                height: 60px;
                background: #1c87f3;
                border-radius: 0px 50px 50px 0px;
                color: #fff;
                font-size: 20px;
            }
        }
    }

    .select-type,
    .data-list {
        width: 1200px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
        box-sizing: border-box;
    }

    .data-list {
        width: 1200px;
        margin: 13px auto;
        display: flex;
        flex-wrap: wrap;
        .modelItem:nth-child(4n) {
            background-color: pink;
            border-radius: 4px;
        }
    }
    .middle-nav {
        width: 1200px;
        margin: 0 auto;

        .select-type {
            // height: 156px;
            border-radius: 10px 10px 10px 10px;
            background: #ffffff;
            padding: 10px 30px;
            border: 1px solid #d3d3d3;

            .st-t {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                padding: 15px 0;

                .label {
                    font-size: 14px;
                    color: #888888;
                    width: 72px;
                    min-width: 72px;
                }

                .st-item {
                    background: #ffffff;
                    border-radius: 4px;
                    font-size: 14px;
                    line-height: 35px;
                    color: #333333;
                    padding: 0 15px;
                    margin: 0 8px;
                    > a {
                        display: block;
                    }
                }
                .st-item-s {
                    background: #eaf4ff;
                    color: #1c87f3;
                }
            }
        }
    }
}

.main-body {
    margin: 0 auto;
    width: 1200px;
    margin-top: 22px;
}

.page {
    padding-top: 13px;
    padding-bottom: 63px;
    display: flex;
    justify-content: center;
}

::v-deep .el-input__inner {
    border: none !important;
    width: 450px !important;
}

.intro {
    width: 1200px;
    height: 117px;
    position: relative;
    margin: 0 auto;
    margin-top: 30px;

    .intro-img {
        width: 100%;
        height: 100%;
    }

    .txt {
        width: 823px;
        position: absolute;
        top: 23px;
        left: 136px;
        font-size: 14px;
        font-weight: 400;
        color: #7b9bbf;
        line-height: 24px;
        letter-spacing: 1px;
    }
}
</style>
